<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-05 01:25:39
 * @LastEditors: yyh
 * @LastEditTime: 2022-05-16 11:10:17
-->
<!-- 资产图表页面 -->
<template>
  <div class="chart">
    <div id="bar" style="width: 50%; height: 500px"></div>
    <div id="pie" style="width: 50%; height: 600px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    async drawLine() {
      let res1 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "未审核" },
      });
      let res2 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "不通过" },
      });
      let res3 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "闲置" },
      });
      let res4 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "使用中" },
      });
      let res5 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "借用中" },
      });
      let res6 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "维修中" },
      });
      let res7 = await this.$http.get("assets/getAssetsStatusTotal", {
        params: { status: "已报废" },
      });
      this.value1 = res1.data.data[0].result;
      this.value2 = res2.data.data[0].result;
      this.value3 = res3.data.data[0].result;
      this.value4 = res4.data.data[0].result;
      this.value5 = res5.data.data[0].result;
      this.value6 = res6.data.data[0].result;
      this.value7 = res7.data.data[0].result;
      //柱状图
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = this.$echarts.init(document.getElementById("bar"));
      myChart1.setOption({
        //图表标题
        title: {
          text: "资产状态数量柱状图",
          x: "center",
          y: "bottom",
        },
        //颜色
        color: ["#409eff"],
        tooltip: {},
        legend: {
          data: ["数量"],
        },
        xAxis: {
          name: "状态",
          nameGap: 15,
          //坐标轴 轴线
          axisLine: {
            //是否显示坐标轴
            show: true,
            //是否显示箭头
            symbol: ["none", "arrow"],
            //箭头位置
            symbolOffset: [0, 12],
          },
          data: ["未审核","不通过","闲置", "使用中", "借用中", "维修中", "已报废"],
        },
        yAxis: {
          name: "数量",
          nameGap: 15,
          //坐标轴 轴线
          axisLine: {
            //是否显示坐标轴
            show: true,
            //是否显示箭头
            symbol: ["none", "arrow"],
            //箭头位置
            symbolOffset: [0, 12],
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: [
              this.value1,
              this.value2,
              this.value3,
              this.value4,
              this.value5,
              this.value6,
              this.value7,
            ],
          },
        ],
      });

      //饼状图
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById("pie"));
      myChart2.setOption({
        //图表标题
        title: {
          text: "资产状态数量占比图",
          x: "center",
          y: 470,
        },
        //图例
        legend: {
          x: "center",
          y: "top",
        },
        series: [
          {
            name: "资产状态",
            type: "pie", // 设置图表类型为饼图
            center: ["50%", "40%"],
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            label: {
              normal: {
                show: true,
                formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
              },
            },
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: this.value1, name: "未审核" },
              { value: this.value2, name: "不通过" },
              { value: this.value3, name: "闲置" },
              { value: this.value4, name: "使用中" },
              { value: this.value5, name: "借用中" },
              { value: this.value6, name: "维修中" },
              { value: this.value7, name: "已报废" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style>
.chart {
  display: flex;
}
</style>